<template>
  <div class="product">
    <div class="header">
      <el-button type="primary" @click="openDialog">新增</el-button>
    </div>
    <div class="content">
      <!-- 表格 -->
      <el-table :data="list" style="width: 100%" v-loading="loading">
        <el-table-column label="主标题" width="200">
          <template #default="{ row }">
            <div class="title text">{{ row.title }}</div>
          </template>
        </el-table-column>
        <el-table-column label="gitee地址" width="300">
          <template #default="{ row }">
            <div class="sub__title text">
              {{ row.gitee_url }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="下载类型">
          <template #default="{ row }">
            <div class="text">{{ row.type }}</div>
          </template>
        </el-table-column>
        <el-table-column label="封面">
          <template #default="{ row }">
            <img class="poster" :src="row.poster" alt="封面" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="warning" @click="updateData(row.id)"
              >编辑</el-button
            >
            <el-popconfirm
              title="确定要删除此轮播图吗"
              @confirm="deleteData(row.id)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
              <template #actions="{ confirm, cancel }">
                <el-button size="small" @click="cancel">取消</el-button>
                <el-button type="danger" size="small" @click="confirm">
                  确定
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 操作弹层 -->
      <el-dialog
        v-model="optionDialogVisible"
        :title="optionDoalogTitle"
        width="1000"
      >
        <div class="dia_content">
          <el-form :model="optionForm" v-loading="loading">
            <el-form-item label="标题" label-width="80px">
              <el-input
                type="textarea"
                v-model="optionForm.title"
                :autosize="{ minRows: 4, maxRows: 10 }"
                placeholder="请输入标题..."
              ></el-input>
            </el-form-item>

            <el-form-item label="gitee地址" label-width="80px">
              <el-input
                type="textarea"
                v-model="optionForm.gitee_url"
                :autosize="{ minRows: 4, maxRows: 10 }"
                placeholder="请输入gitee地址..."
              ></el-input>
            </el-form-item>

            <el-form-item label="下载类型" label-width="80px">
              <el-input
                v-model="optionForm.type"
                placeholder="请输入gitee地址..."
              ></el-input>
            </el-form-item>

            <el-form-item label="封面" label-width="80px">
              <imageView
                :src="[optionForm.poster]"
                @deleteImage="deleteImage"
                @addImage="addImage"
              ></imageView>
            </el-form-item>

            <!-- content -->
            <el-form-item label="详情标题" label-width="80px">
              <el-input
                v-model="optionForm.product_detail.title"
                placeholder="请输入详情标题..."
              ></el-input>
            </el-form-item>
            <el-form-item label="详情描述" label-width="80px">
              <el-input
                type="textarea"
                v-model="optionForm.product_detail.desc"
                :autosize="{ minRows: 2, maxRows: 10 }"
                placeholder="请输入详情描述..."
              ></el-input>
            </el-form-item>
            <div
              v-for="(item, index) in optionForm.product_detail.content"
              :key="index"
            >
              <el-form-item label="详情内容" label-width="80px">
                <el-input
                  type="textarea"
                  v-model="optionForm.product_detail.content[index].title"
                  :autosize="{ minRows: 4, maxRows: 10 }"
                  placeholder="请输入内容..."
                ></el-input>
              </el-form-item>
              <el-form-item label="详情图片" label-width="80px">
                <imageView
                  :src="optionForm.product_detail.content[index].image"
                  :parentIndex="index"
                  multiplication
                  @deleteImage="deleteImageContent"
                  @addImage="addImageContent"
                ></imageView>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="optionDialogVisible = false">取消</el-button>
            <el-button
              v-if="optionDoalogTitle === '新增'"
              type="warning"
              @click="addContent"
              >增加内容</el-button
            >
            <el-button type="primary" @click="submit" :loading="loading"
              >确定</el-button
            >
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'

import imageView from '@/base-ui/image-view/index.vue'
import {
  addProductApi,
  getProductListApi,
  upload,
  deleteProductApi,
  updateProductApi
} from '@/api'

import { normalOptions } from '@/hooks/normalOptions'

const upFile = ref<File>() // 上传的文件
let optionForm = reactive({
  // 表单数据
  title: '',
  gitee_url: '',
  type: '',
  poster: '',
  product_detail: {
    title: '',
    desc: '',
    content: [
      {
        title: '',
        image: [] as any[]
      }
    ]
  } as any
})

// 赋值数据
const assignmentData = (data: any) => {
  optionForm.gitee_url = data.gitee_url
  optionForm.title = data.title
  optionForm.type = data.type
  optionForm.poster = data.poster
  optionForm.product_detail.title = data.product_detail.title
  optionForm.product_detail.desc = data.product_detail.desc
  optionForm.product_detail.content = data.product_detail.content
}

// 清空数据
const clearFormData = () => {
  optionForm.title = ''
  optionForm.gitee_url = ''
  optionForm.type = ''
  optionForm.poster = ''
  optionForm.product_detail.title = ''
  optionForm.product_detail.desc = ''
  optionForm.product_detail.content = [
    {
      title: '',
      image: [] as any[]
    }
  ]
}

const {
  list,
  loading,
  optionDialogVisible,
  optionDoalogTitle,
  currentId,
  getList,
  openDialog,
  addData,
  deleteData,
  updateData,
  uploadFile,
  submitUpdateData
} = normalOptions({
  dialogFormData: optionForm,
  upFile: upFile,
  getList: getProductListApi,
  addData: addProductApi,
  assignmentData: assignmentData,
  clearFormData: clearFormData,
  uploadFile: upload,
  deleteData: deleteProductApi,
  updateData: updateProductApi
})

onMounted(() => {
  // 获得轮播图列表
  getList()
})

// 删除封面poster
const deleteImage = () => {
  optionForm.poster = ''
}

// 选择了poster
const addImage = async (f: File) => {
  const res = await uploadFile(f)
  optionForm.poster = res
}

// 删除详情图片
const deleteImageContent = (index: number, parentIndex: number) => {
  optionForm.product_detail.content[parentIndex].image.splice(index, 1)
}

// 选择了详情图片
const addImageContent = async (f: FileList, index: number) => {
  let arr: any[] = []
  if (f.length) {
    arr = Array.from(f)
  } else {
    arr[0] = f
  }
  for (let i = 0; i < arr.length; i++) {
    const res = await uploadFile(arr[i])
    optionForm.product_detail.content[index].image.push(res)
  }
}

// 点击增加详情内容
const addContent = () => {
  optionForm.product_detail.content.push({
    title: '',
    image: []
  })
}

// 提交表单
const submit = () => {
  if (optionDoalogTitle.value === '新增') {
    const obj = optionForm
    obj.product_detail = JSON.stringify(obj.product_detail)
    addData(obj)
  } else if (optionDoalogTitle.value === '编辑') {
    console.log(currentId.value)
    submitUpdateData({ ...optionForm, id: currentId.value })
  }
}
</script>

<style scoped lang="less">
.product {
  .header {
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    > .el-button {
      width: 150px;
    }
  }
  .content {
    background-color: var(--bgColorTop);
    cursor: pointer;
    .text {
      color: var(--fontColorBase);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    :deep .el-table__row {
      background-color: var(--bgColorTop) !important;
    }
    :deep .el-table__cell {
      color: var(--fontColorBase);
      background-color: var(--bgColorTop) !important;
    }
    :deep .el-table__cell {
      border-bottom-color: var(--bgColorBase);
    }
    :deep .el-table__inner-wrapper::before {
      background-color: var(--bgColorTop);
    }
    :deep .el-dialog {
      background-color: var(--bgColorTop);
    }
    :deep .el-form-item__label {
      color: var(--fontColorBase);
    }
    :deep .el-textarea__inner {
      color: var(--fontColorBase);
      background-color: var(--bgColorTop);
    }
    :deep .el-dialog__title {
      color: var(--fontColorBase);
    }
    .poster {
      width: 100px;
    }
  }

  .dia_content {
    width: 100%;
    :deep .el-textarea__inner {
      resize: none;
    }
  }
}
</style>
